window.addEventListener('load', () => {
    //获取元素
    const shopList = document.querySelector('.shop .cart')
    const lists = document.querySelectorAll('.learn1 .font')
    const div = document.querySelectorAll('.learn1')
    const qie = document.querySelector('.tab-tit .list')
    const qies = document.querySelectorAll('.tab-tit .list li')
    const input = document.querySelector('.search [name="search"]')
    const btn = document.querySelector('.sou .s-btn')
    const search = document.querySelector('.search .s')
        //请求数据。渲染内容
    getCategory()

    function getCategory() {
        promiseAjax({
            url: './json/daierData.json'
        }).then(res => {
            var str = ''
                //动态渲染到页面
                //按下按钮显示相应的内容
            for (var i = 0; i < 9; i++) {
                str += `
                <div class="item">
                    <div class="img">
                        <img src="https:${res[i].psimg}">
                    </div>
                    <div class="title">
                        <h4>${res[i].pstitle}</h4>
                    </div>
                    <div class="btn">
                        <div class="btn-box">
                            <a href="./list.html" class="learn-more">更多商品</a>
                            <a href="./info.html?id=${res[i].pid}" class="now-buy">立即购买</a>
                        </div>
                    </div>
                </div>
            `
            }
            //将数据放进shopList里面
            shopList.innerHTML = str
        })
    }
    //悬停上方出现相对应的内容-滑动显示
    for (var i = 0; i < lists.length; i++) {
        lists[i].onmouseenter = function() {
            for (var i = 0; i < lists.length; i++) {
                lists[i].nextElementSibling.className = 'list show'
            }
            this.nextElementSibling.className = 'list'
        }
    }
    //移出隐藏
    for (var i = 0; i < div.length; i++) {
        div[i].onmouseleave = function() {
            for (var i = 0; i < lists.length; i++) {
                lists[i].nextElementSibling.className = 'list show'
            }
        }
    }
    //显示的内容出来以后，点击可跳转相应页面 - 获取变量
    const ul = document.querySelectorAll('.list-1 ul')
        //事件委托
    for (var i = 0; i < ul.length; i++) {
        ul[i].addEventListener('click', e => {
            const target = e.target || e.srcElement
                // target.onmouseenter = function() {
                //         console.log(this);
                //         this.style.color = '#0199D5'
                //     }
            location.href = './list.html'
        })
    }
    //点击笔记本和商务本时切换不同的内容 - 事件委托
    qie.addEventListener('click', e => {
        const target = e.target || e.srcElement
        promiseAjax({
            url: './json/daierData.json'
        }).then(res => {
            //数据请求
            getList(target.innerText)
        })
        for (var i = 0; i < qies.length; i++) {
            qies[i].className = 'item'
        }
        console.log(target);
        target.className = 'item col'

    })

    //上面输入框输入内容后，点击搜索图片 - 显示对应的内容
    search.addEventListener('click', function() {
        //获取输入框的内容
        const text = input.value
        getList(text)
    })

    //下面输入框输入内容后，点击搜索图片 - 跳到列表页
    btn.addEventListener('click', function() {
        //获取输入框的内容
        location.href = './list.html'
    })

    //默认显示
    getList()
        //请求商品方法
    function getList(o) {
        promiseAjax({
            url: './json/daierData.json',
        }).then(res => {
            //判断输入的是什么，显示
            let jx = []
            if (o == '查看全部' || o == '全部' || !o) {
                jx = res
                getInner(jx)
            }
            if (o == '家庭版笔记本' || o == '家用笔记本') {
                const reg = /家庭版/
                for (var i = 0; i < res.length; i++) {
                    if (reg.test(res[i].win)) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == '高评分笔记本' || o == '高评分') {
                for (var i = 0; i < res.length; i++) {
                    if (+res[i].pingfen == 5.0) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == '优惠' || o == '查看全部优惠') {
                for (var i = 0; i < res.length; i++) {
                    if (res[i].zhekou) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == '商务本' || o == '商务笔记本') {
                const reg = /商务/
                for (var i = 0; i < res.length; i++) {
                    if (reg.test(res[i].pstitle)) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == '高性能商务本') {
                const reg = /高性能商务/
                for (var i = 0; i < res.length; i++) {
                    if (reg.test(res[i].pstitle)) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == '轻薄本') {
                const reg = /轻薄/
                for (var i = 0; i < res.length; i++) {
                    if (reg.test(res[i].pstitle)) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == /大屏显示/.test(res)) {
                const reg = /15\.6/
                for (var i = 0; i < res.length; i++) {
                    if (reg.test(res[i].monitor)) {
                        jx.push(res[i])
                    }
                }
                jx.sort(randomsort)
                getInner(jx)
            }
            if (o == 'recommend') {
                jx = res.sort(randomsort)
                getInner(jx)
            }
            if (o == '价低') {
                const reg = /\d+[\.]\d+/
                for (var j = 0; j < res.length - 1; j++) {
                    for (var i = 0; i < res.length - 1 - j; i++) {
                        if (+res[i].price.match(reg)[0] > +res[i + 1].price.match(reg)[0]) {
                            var c = res[i]
                            res[i] = res[i + 1]
                            res[i + 1] = c
                        }
                    }
                }
                jx = res
                getInner(jx)
            }
            if (o == '价高') {
                const reg = /\d+[\.]\d+/
                for (var j = 0; j < res.length - 1; j++) {
                    for (var i = 0; i < res.length - 1 - j; i++) {
                        if (+res[i].price.match(reg)[0] < +res[i + 1].price.match(reg)[0]) {
                            var c = res[i]
                            res[i] = res[i + 1]
                            res[i + 1] = c
                        }
                    }
                }
                jx = res
                getInner(jx)
            }
            if (o == '折低') {
                const reg = /\d+[\.]\d+/
                for (var j = 0; j < res.length - 1; j++) {
                    for (var i = 0; i < res.length - 1 - j; i++) {
                        if (+res[i].zhekou.match(reg)[0] > +res[i + 1].zhekou.match(reg)[0]) {
                            var c = res[i]
                            res[i] = res[i + 1]
                            res[i + 1] = c
                        }
                    }
                }
                jx = res
                getInner(jx)
            }
            if (o == '折高') {
                const reg = /\d+[\.]\d+/
                for (var j = 0; j < res.length - 1; j++) {
                    for (var i = 0; i < res.length - 1 - j; i++) {
                        if (+res[i].zhekou.match(reg)[0] < +res[i + 1].zhekou.match(reg)[0]) {
                            var c = res[i]
                            res[i] = res[i + 1]
                            res[i + 1] = c
                        }
                    }
                }
                jx = res
                getInner(jx)
            }
            if (jx.length == 0) {
                shopList.innerHTML = '没有相关宝贝哦！！！'
            }
        })
    }
    //放内容的方法
    function getInner(res) {
        var str = ''
            //动态渲染到页面
            //按下按钮显示相应的内容
        for (var i = 0; i < 9; i++) {
            str += `
                <div class="item">
                    <div class="img">
                        <img src="https:${res[i].psimg}">
                    </div>
                    <div class="title">
                        <h4>${res[i].pstitle}</h4>
                    </div>
                    <div class="btn">
                        <div class="btn-box">
                            <a href="./list.html" class="learn-more">更多商品</a>
                            <a href="./info.html?id=${res[i].pid}" class="now-buy">立即购买</a>
                        </div>
                    </div>
                </div>
            `
        }
        //将数据放进shopList里面
        shopList.innerHTML = str
    }
    //数组的随机排序
    function randomsort(a, b) {
        return Math.random() > .5 ? -1 : 1;
    }

})